<template>
  <component :is="map[curComponent]"></component>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { useRoute } from 'vue-router'

import TableLayout from './css-layout/tableLayout.vue'
import PositionProperty from './css-layout/positionProperty.vue'
import FloatLayout from './css-layout/floatLayout.vue'
import AdsorptionBottom from './adsorptionBottom.vue'

const route = useRoute()
const curComponent = ref()

// 动态组件map
const map = {
  tableLayout: TableLayout,
  positionProperty: PositionProperty,
  floatLayout: FloatLayout,
  adsorptionBottom: AdsorptionBottom,
}

watch(
  () => route.params,
  (newV, oldV) => {
    curComponent.value = newV.name
  },
  { immediate: true }
)
</script>
